<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>报名列表</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }


    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .pagination a {
      color: black;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
      transition: background-color .3s;
    }

    .pagination a.active {
      background-color: #4CAF50;
      color: white;
    }

    .pagination a:hover:not(.active) {
      background-color: #ddd;
    }

    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }


    .back-link {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .current-page {
      text-align: center;
      font-size: 1.2em;
      margin: 20px 0;
    }
  </style>
</head>
<body>

<h1>报名列表</h1>

<table>
  <thead>
  <tr>

    <th>Id</th>
    <th>昵称</th>
    <th>手机号</th>
    <th>志愿时长</th>

  </tr>
  </thead>
  <tbody>
  <tr th:each="user : ${userList}">
    <td th:text="${user.getId()}"></td>
    <td th:text="${user.getNickname()}"></td>
    <td th:text="${user.getMobile()}"></td>
    <td th:text="${user.getTotalVolunteerHours()}"></td>
<!--    <td th:text="${user.getRegisterDate()}"></td>-->

  </tr>
  </tbody>
</table>


<!--<div class="pagination" th:if="${totalPages > 1}">-->
<!--  <a th:if="${currentPage > 1}" th:href="@{/userList(currentPage=1)}">首页</a>-->
<!--  <a th:if="${currentPage > 1}" th:href="@{/userList(currentPage=${currentPage - 1})}">&laquo; 上一页</a>-->

<!--  &lt;!&ndash; 显示第一页和第二页 &ndash;&gt;-->
<!--  <a th:if="${totalPages > 1}" th:href="@{/userList(currentPage=1)}" th:class="${currentPage == 1} ? 'active' : ''">1</a>-->
<!--  <a th:if="${totalPages > 2}" th:href="@{/userList(currentPage=2)}" th:class="${currentPage == 2} ? 'active' : ''">2</a>-->

<!--  &lt;!&ndash; 如果当前页不是前两页且不是最后两页，显示省略号 &ndash;&gt;-->
<!--  <span th:if="${totalPages > 4}">...</span>-->

<!--  &lt;!&ndash; 显示倒数第二页和最后一页 &ndash;&gt;-->
<!--  <a th:if="${totalPages > 3}" th:href="@{/userList(currentPage=${totalPages - 1})}" th:class="${currentPage == totalPages - 1} ? 'active' : ''" th:text="${totalPages - 1}"></a>-->
<!--  <a th:if="${totalPages > 1}" th:href="@{/userList(currentPage=${totalPages})}" th:class="${currentPage == totalPages} ? 'active' : ''" th:text="${totalPages}"></a>-->

<!--  <a th:if="${currentPage < totalPages}" th:href="@{/userList(currentPage=${currentPage + 1})}">下一页 &raquo;</a>-->
<!--</div>-->
<!--&lt;!&ndash; 显示当前页码 &ndash;&gt;-->
<!--<p class="current-page" th:text="'当前是第 ' + ${currentPage} + ' 页'"></p>-->
<!--<span class="pagination" th:text="'共'+${totalPages}+'页'"></span>-->

<!--&lt;!&ndash; 添加右上角的超链接 &ndash;&gt;-->
<!--<a class="back-link" th:href="@{/toSuperAdminPage}">回到管理员页面</a>-->




</body>
</html>